﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>图片切换</title>
    <style>
        a{
            color: #c01900;
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="开关灯1.html">开关灯1</a>
<br/>
<br/>
<input type="button" value="1" onclick="pic1()">
<input type="button" value="2" onclick="pic2()">
<input type="button" value="3" onclick="pic3()">
<input type="button" value="4" onclick="pic4()">
<input type="button" value="上一张" onclick="prev()">
<input type="button" value="下一张" onclick="next()">
<input type="button" value="放大" onclick="fangDa()">
<input type="button" value="缩小" onclick="suoXiao()">
<input type="range" id="range" value="0" min="0" max="100" step="1" onmousemove="fangDaOrSuoXiao()">

<br/>
<hr/>
<img src="1.jpg" width="300" id="pic"/>
<script>
    var i=1;
    function pic1() {
        pic.src="1.jpg";
    }
    function pic2() {
        pic.src="2.jpg";
    }
    function pic3() {
        pic.src="3.jpg";
    }
    function pic4() {
        pic.src="4.jpg";
    }
function prev() {
        i--;
        if(i==0){
            i=4;
        }
    pic.src=i+".jpg";
}
    function next() {
        i++;
        if(i==5){
            i=1;
        }
        pic.src=i+".jpg";
    }
    function fangDa() {
        pic.width=pic.width*1.1;
    }
    function suoXiao() {
        pic.width=pic.width*0.9;
    }
    function fangDaOrSuoXiao() {
        pic.width=pic.width*range.value/90+100;
    }
</script>
</body>
</html>